<template>
  <div id="addsortmang">
    <p class="addsort">新增分拣管理</p>
    <!-- 表格 -->
    <div class="form" style="width:340px;margin:20px auto">
      <el-form ref="Addform" label-position="left" label-width="100px" :model="Addform" :rules="rules">
        <el-form-item label="分拣主管" label-width="100px">
          <el-input v-model="Addform.name" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="Addform.phone" />
        </el-form-item>
        <el-form-item label="分拣线">
          <el-select v-model="Addform.sortLineId" placeholder="请选择">
            <el-option
              v-for="item in sortLineIds"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="班次">
          <el-select v-model="Addform.workStatus" placeholder="请选择">
            <el-option
              v-for="item in workStatu"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="每天最大产能" prop="maxCapacity">
          <el-input v-model="Addform.maxCapacity" />
        </el-form-item>
      </el-form>
      <el-row style="text-align: center;margin-top:40px;">
        <el-button @click="cancle()">取消</el-button>
        <el-button type="primary" class="confirm" @click="confirm()">确认</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import { addsortmanger, inquiresortline } from '@/api/sortmanage.js'
export default {
  data() {
    // 设置手机号的验证规则
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入联系方式'))
      } else {
        const reg = /^1[3|4|5|6|7|8][0-9]\d{8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的电话'))
        }
      }
    }

    return {

      rules: {
        phone: [
          { validator: checkPhone, trigger: 'blur' }
        ]
      },
      Addform: {
        name: '',
        phone: '',
        sortLineId: '',
        workStatus: '',
        maxCapacity:""
      },
      sortLineIds: [],
      workStatu: [
        {
          value: 1,
          label: '早班'
        },
        {
          value: 2,
          label: '晚班'
        }
      ]
    }
  },
  mounted() {
    inquiresortline()
      .then(res => {
        console.log(res)
        var arr = []
        arr = res.rows.map((i, v) => {
          return { value: i.id, label: i.sortinglineName }
        })
        this.sortLineIds = arr
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    confirm() {
      this.$refs.Addform.validate(valid => {
        if (valid) {
          addsortmanger(this.Addform)
            .then(res => {
              console.log(res)
              if (res.code === 20000) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                this.$router.push({ path: 'sortingPlan' })
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              }
            })
            .catch(() => {
              this.$message({
                type: 'error',
                message: '请求错误'
              })
            })
        } else {
          return false
        }
      })
    },
    cancle() {
      this.$router.push({ path: 'sortingPlan' })
    }
  }
}
</script>

<style lang="scss" scoped>
#addsortmang {
  padding: 20px 20px;
  .addsort {
    font-size: 22px;
  }
  .confirm {
    margin-left: 30px;
  }
}
</style>
